.euiPopover__panel {
  .euiPopover__panelArrow {
    &:before {
      filter: blur($euiSizeXS - 1px);
      opacity: 0.2;
    }

    $arrowShadowCompensation: $euiSizeXS;

    &.euiPopover__panelArrow--top {
      &:before {
        bottom: -$euiPopoverArrowSize;
        border-top-color: $euiShadowColor;
        clip-path: polygon(
          #{-$arrowShadowCompensation} 0,
          #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} 0,
          #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{$euiPopoverArrowSize +
            $arrowShadowCompensation},
          #{-$arrowShadowCompensation} #{$euiPopoverArrowSize +
            $arrowShadowCompensation}
        );
      }

      &:after {
        bottom: -$euiPopoverArrowSize + 1;
      }
    }

    &.euiPopover__panelArrow--right {
      &:before {
        border-right-color: $euiShadowColor;
        clip-path: polygon(
          #{-$arrowShadowCompensation} #{-$arrowShadowCompensation},
          $euiPopoverArrowSize #{-$arrowShadowCompensation},
          $euiPopoverArrowSize #{$euiPopoverArrowSize * 2 +
            $arrowShadowCompensation},
          #{-$arrowShadowCompensation} #{$euiPopoverArrowSize * 2 +
            $arrowShadowCompensation}
        );
      }

      &:after {
        left: -$euiPopoverArrowSize + 1;
      }
    }

    &.euiPopover__panelArrow--bottom {
      &:before {
        border-bottom-color: $euiShadowColor;
        clip-path: polygon(
          #{-$arrowShadowCompensation} #{-$arrowShadowCompensation},
          #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{-$arrowShadowCompensation},
          #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} $euiPopoverArrowSize,
          #{-$arrowShadowCompensation} $euiPopoverArrowSize
        );
      }

      &:after {
        top: -$euiPopoverArrowSize + 1;
      }
    }

    &.euiPopover__panelArrow--left {
      &:before {
        right: -$euiPopoverArrowSize;
        border-left-color: $euiShadowColor;
        clip-path: polygon(
          0 #{-$arrowShadowCompensation},
          #{$euiPopoverArrowSize + $arrowShadowCompensation} #{-$arrowShadowCompensation},
          #{$euiPopoverArrowSize + $arrowShadowCompensation} #{$euiPopoverArrowSize *
            2 + $arrowShadowCompensation},
          0 #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}
        );
      }

      &:after {
        right: -$euiPopoverArrowSize + 1;
      }
    }
  }
}

/**
 * Title specific overrides
 */

.euiPopoverTitle {
  text-transform: none;
}

// Mainly for specificity, but don't add padding to the title if
// neither the the panel nor the title has a padding modifier (aka NONE)
.euiPopover__panel:not([class*='euiPanel--padding'])
  .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) {
  padding: 0;
}

// Allow the panel padding to actually modify the all side of the title
@each $modifier, $amount in $euiPanelPaddingModifiers {
  .euiPopover__panel.euiPanel--#{$modifier}
    .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) {
    padding: $amount;
  }
}

/**
 * Footer specific overrides
 */

// Mainly for specificity, but don't add padding to the footer if
// neither the the panel nor the footer has a padding modifier (aka NONE)
.euiPopover__panel:not([class*='euiPanel--padding'])
  .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) {
  padding: 0;
}

// Allow the panel padding to actually modify the all side of the footer
@each $modifier, $amount in $euiPanelPaddingModifiers {
  .euiPopover__panel.euiPanel--#{$modifier}
    .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) {
    padding: $amount;
  }
}
